<template>
    <section class="main-upload-img">

        <div class="operator-upload-and-search">
            <el-button type="primary" @click="showUploadVideo" class="btn_common_yellow"><i class="iconfont icon-cloud-upload"></i> 上传视频</el-button>
            <el-input class="find-file" @keyup.enter.native='searchNa' placeholder="请输入视频名称" icon="search" v-model='searchName'  :on-icon-click="searchNa"></el-input>
        </div>
        <upload type="video" />
        <div class="img-container">
            <div class="r">
                <b class="img-params"><span class="iconfont icon-focus"></span> 推荐的视频参数：</b>
                <div>
                    视频大小: 小于10M<br />
                    格式：.MP4 文件<br />
                    分辨率：至少为 720p<br />
                    推荐长宽比：宽屏(16:9)<br />

                </div>
            </div>
            <ul class="l" >
                <loading v-if='loadingShow' :customClass="customLoading" />
                <li  v-if='showType == 0' v-for="(item,index,key) in data" :index="index"
                :class="item.showBold?'imgShow':''">
                    <div class="video-div" @mouseenter='showThis(item)' @mouseleave='hideThis(item)'>
                        <img v-lazy="item.preViewUrl" v-if='item.preViewUrl!=null' :index="index"
                        :class="item.css?'img-width':'img-height'"/>
                        <!-- <img  src="item.preViewUrl" lazy="error" v-else/> -->
                        <div class="upload-operator" v-show='item.show && item.ashow'>
                          <span style="cursor:pointer;margin-right: 16px;" class="iconfont icon-review" @click="handlePictureCardPreview(item)" v-if='item.ashows'></span>
                          <span style="cursor:pointer;" class="iconfont icon-del" @click="handleRemove(item.id,item.key)"></span>
                        </div>
                        <div class="upload-mask" v-show='item.show && item.ashow'></div>

                    </div>
                    <div class="file-tips">{{item.size}}</div>
                    <div class="for-show" v-show="!item.onEdit">
                        <div class="ellipsis-text">
                        <span class="txt" style="cursor:pointer;" @click="edit(item,$event)">{{item.videoName}}</span> 
                        <span style="cursor:pointer;color:#B0BEC5;" class="iconfont icon-edit" @click="edit(item,$event)"></span></div>
                    </div>
                    <el-input
                      v-show="item.onEdit"
                      v-model="item.videoName"
                      :value="item.videoName"
                      icon="close"
                      @focus="focus(item)"
                      @blur="blur(item)"
                      :on-icon-click="($event)=>{
                        del(item,$event)
                        }"
                    ></el-input>
                </li>
                <div class="no-data" v-if='showType == 1'>
                    <img src="../../assets/img/no-video.png"><br>
                    <span>暂无视频</span>
                </div>
                <div class="no-data" v-if='showType == 2'>
                    <img src="../../assets/img/no-data.png"><br>
                    <span>查询无数据</span>
                </div>
            </ul>
            <el-dialog v-model="dialogVisible" size='auto'>
                <loading v-if='loadingShows' :customClass="customLoading" />
              <video v-if='showVideo' :src="dialogVideoUrl" controls preload="auto"  id='video1' width='960px;' height="540px">
              您的浏览器不支持 video 标签。
              </video>
            </el-dialog>
            <div style="margin-top: 10px;"></div>
            <el-pagination
                style='text-align: right;margin-right: 270px;'
                v-if='showPage'
                class="pagination"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.currentPage"
                :page-sizes="[9, 18, 27, 36]"
                :page-size="page.size"
                layout="prev, pager, next, sizes, jumper"
                :total="page.total">
        </el-pagination>
        </div>

    </section>
</template>

<script>
    import Vue from 'vue';
    import upload from '~components/upload/upload.vue';
    import loading from '~components/loading.vue';
    import { isInteger , getDate , changeParam, getParam} from '~/assets/js/global'
    import { Input, Button, Pagination, Message, Loading} from 'element-ui';
    Vue.use(Input);
    Vue.use(Button);
    Vue.use(Pagination);

    export default {
        components: {
            upload,
            loading,
        },
        data() {
            return {
                title: '视频素材',
                customLoading : 'position:absolute;',
                searchName:'',
                managerIndex : 1 ,
                dialogVideoUrl: '',
                dialogVisible: false,
                loadingShow:true,
                loadingShows:true,
                page: {   // 每页可选条数列表,
                    total: 0,
                    currentPage: 1,
                    size: 9
                },
                data : [],
                showVideo: true,
                showPage: false,
                showType: 0,//无数据类型
                typeList: 0,//判断是否为查询，0列表，1查询
                
            }
        },
        watch: {
            $route() {
                this.getDateSize()
            }
        },
        methods:{
            blur(item){
                setTimeout(()=>{                	
                    if(item.del){
                        item.videoName = '';
                        item.onEdit = true;
                        this.iconClose(item);
                        item.del = false;
                        return;
                    }else{
                        if (item.videoName == '') {
                            item.videoName = item.nameBefore 
                            item.onEdit = false;                    
                        }else {
                            item.onEdit = false;
                            this.$store.dispatch("changeVideoName",{  
                                name : item.videoName,
                                id: item.id
                            }).then(res=>{
                                
                            })
                        }
                        
                    }
                },500)
                
            },
            focus(item) {
                item.onEdit = true;
                if (item.videoName != '') {
                    Vue.set(item,'nameBefore',item.videoName)
                }
            },
            
            iconClose(item){
                let input = this.eventItem.target.parentNode.querySelectorAll('input')[0];
                input.focus();
                
             },

            edit(item, e) {
                item.onEdit = true;
                let input = e.target.parentNode.parentNode.parentNode.querySelectorAll('input')[0];
                setTimeout(() => {
                    input.focus();
                }, 0);
            },
            del(item,event) {
                item.del = true;
                this.eventItem = event;
            },
            uploadVideoSuccess(list){
                this.loadingShow = true
                for(let p of list){
                    this.$store.dispatch("saveAddVideo",{
                        key:p.key,
                        name:p.name,
                        persistentId:p.persistentId,
                        size:p.size
                    }).then(res=>{
                        this.lazy()
                        this.getVideosList()
                        Message({
                          duration: 3000,
                          message: '上传成功',
                          type: 'success',
                        })
                    })
                }                
            },
            handleCurrentChange(val) {
                this.page.currentPage = val;                
                // changeParam('page',val);
                this.getVideosList();
            },
            handleSizeChange(val){
                this.page.size = val;
                // changeParam('pageSize',val);
                this.getVideosList();
            },
            handleRemove(id,key) {
                    this.loadingShow = true 
                    this.$store.dispatch("deleteAddVideo",{  
                        id:id
                        }).then(res=>{                   
                         this.getVideosList()
                      })
                    this.data.forEach((n,i)=>{
                      if(n.id == id){
                        this.data.splice(i,1);
                        return;
                      }
                    });
            },
            showUploadVideo() {
                this.$store.commit('SHOW_POPOVER_UPLOAD_VIDEO', {
                    showPopoverUploadVideo: true
                })
            },
            getVideosList() {
                this.loadingShow = true
                this.$store.dispatch("seachAddVideo",{
                    name:this.searchName,  
                    pageSize:this.page.size,
                    pageNum:this.page.currentPage
                }).then(res=>{
                    this.lazy()
                    if (res.data.data) {
                        this.data = res.data.data.list
                        this.page.total = res.data.data.total
                    }else {
                        this.data = []
                        this.page.total = 0
                    }
                    this.loadingShow = false
                    if (this.data.length == 0) {
                        if (this.typeList ==0) {
                            this.showType = 1
                        }else{
                            this.showType = 2
                        }
                        this.showPage = false
                    }else {
                        this.showType = 0
                        this.showPage = true
                    }
                    for(let a in res.data.data.list){
                        Vue.set(this.data[a],'onEdit',false)
                        Vue.set(this.data[a],'show',false)
                        Vue.set(this.data[a],'ashow',false)
                        Vue.set(this.data[a],'ashows',true)
                        Vue.set(this.data[a],'showBold',true)//边缘图片margin控制属性
                        Vue.set(this.data[a],'css',true)//根据图片宽高判断图片根据高宽那个比，true根据宽
                        //计算实际显示宽
                        var widthA = (parseInt(this.data[a].width)*160)/parseInt(this.data[a].height)
                        var size = Math.floor(parseInt(this.data[a].size)/1024)
                        if (size < 1024) {
                            size = size + 'K'
                        }else{
                            size = Math.floor(parseInt(size)/1024) + 'M'
                        }
                        if ((a+1)%3 == 0) {
                            Vue.set(this.data[a],'showBold',false)
                        }//处理第三张图，没有margin
                        if (widthA > 283) {
                            Vue.set(this.data[a],'css',false)
                        }//处理图片宽高适应
                        Vue.set(this.data[a],'size',size)
                    }
                }).catch(()=>{
                    this.data = []
                    this.page.total = 0
                    this.loadingShow = false
                    if (this.typeList ==0) {
                        this.showType = 1
                    }else{
                        this.showType = 2
                    }
                    this.showPage = false   
                })
            },
            handlePictureCardPreview(file) {
                this.showVideo = false
                Vue.nextTick(()=>{
                    this.showVideo =true
                     this.dialogVideoUrl = file.videoUrl;
                      this.dialogVisible = true;
                      this.loadingShows = true
                      setTimeout(()=>{
                        var video = document.getElementById("video1")
                        video.addEventListener('loadstart',()=>{
                        })
                        video.addEventListener('canplay',()=>{
                            this.loadingShows = false
                        })
                        video.addEventListener('playing',()=>{
                            this.loadingShows = false
                        })
                        video.addEventListener('load',()=>{
                            // this.loadingShows = false
                        })
                        video.addEventListener('progress',()=>{
                            // this.loadingShows = false
                        })
                        video.addEventListener('loadedmetadata',()=>{
                            // this.loadingShows = false
                        })
                        video.addEventListener('loadeddata',()=>{
                            // this.loadingShows = false
                        })
                        video.addEventListener('waiting',()=>{
                            // this.loadingShows = false
                        })
                        video.addEventListener('seeking',()=>{
                            // this.loadingShows = false
                        })
                      },0)
                  })
                
                  
            },
            showThis(item) {
                item.show = true
            },
            hideThis(item) {
                item.show = false
            },
            searchNa() {
                this.typeList = 1
                this.getVideosList()
            },
            lazy() {
                this.$Lazyload.$off('loaded')
                this.$Lazyload.$off('error')
                this.$Lazyload.$on('loaded', this.handel)
                this.$Lazyload.$on('error', this.handels)
            },
            handel({el }, formCache) {
                if (el.attributes['index']) {
                    var index = el.attributes['index'].value
                    Vue.set(this.data[index],'ashow',true)
                }
            },
            handels({el }, formCache) {
                if (el.attributes['index']) {
                    var index = el.attributes['index'].value
                    Vue.set(this.data[index],'ashow',true)
                    Vue.set(this.data[index],'ashows',false)
                }
            },
            getDateSize() {
                if(getParam('page')) {
                    this.page.currentPage = parseInt(getParam('page'));
                }else {
                    this.page.currentPage = 1
                }
                if(getParam('pageSize')){
                    this.page.size = parseInt(getParam('pageSize'));
                }else {
                    this.page.size = 9
                }  
            },
        },
        computed : {

        },
        created() {
            if (process.BROWSER_BUILD ) {
                this.getDateSize()
                this.getVideosList()
            }
        },
        mounted() {
           
        }
    }
</script>

<style scoped lang="scss">
        
         img[lazy=loading] {
             height: 18px;
             position: absolute;
             left: 50%;
             top: 50%;
             transform:translate(-50%,-50%);
           }
           img[lazy=error] {
             height: 18px;
             width:24px;
             position: absolute;
             left: 50%;
             top: 50%;
             transform:translate(-50%,-50%);
           }
          .img-width[lazy=loaded] {
              width: 100%;
              -ms-interpolation-mode: bicubic;
              vertical-align: middle;
              border:none 0;
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%,-50%);
            }
            .img-height[lazy=loaded] {
              height: 100%;
              -ms-interpolation-mode: bicubic;
              vertical-align: middle;
              border:none 0;
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%,-50%);
            }
        .menu-wrapper{
            height: 50px;
            background: #FFFFFF;
            border: 1px solid #EAEEF0;
            border-radius: 4px 4px 0 0;
            .item {
                height: 47px;
                font-size: 16px;
                color: #666666;
                letter-spacing: 0;
                line-height: 50px;
                float: left;
                margin: 0 25px;
                cursor: pointer  ;
            }
            .item.active {
                font-family: STHeitiSC-Light;
                color: #0686F9;
                border-bottom: 3px solid #0686F9;
            }
        }

        .operator-upload-and-search {
            width:100%;height:80px;background: #FFFFFF;
            .btn_common_yellow {
                width:120px;height:34px;background:#ffb100;border-radius:100px;outline:none;border:0;margin-left:23px;margin-top:23px;float:left
            }
            .btn_common_yellow:hover{background:#e59e00}
            .el-input {width: 320px;margin-left: 15px;float:left;margin-top:22px}
        }

        .main-upload-img{
            background-color:#fff;
            overflow: hidden;
        }

        .find-file{
            width: 320px;
            margin-left: 15px;
        }

        .img-container{
            overflow: hidden;
            margin:0 0 24px 24px;
        }
        .img-container .l{
            overflow: hidden;
            background: #FFFFFF;
            border: 1px solid #EAEEF0;
            border-radius: 4px;
            padding:20px 20px 20px 20px;
            min-height: 370px;
            position:relative;
            width: 918px;
            /*display:flex;
            flex-direction: row;
            justify-content: space-around;

            align-content: space-between;
            align-items:stretch;*/
            .video-div {
                height: 160px;width: 293.3px;overflow:hidden;position:relative;
            }
            .upload-operator{
                z-index: 110;
                  position: absolute;
                  left: 50%;
                  top: 50%;
                  transform:translate(-50%,-50%);
                  width: 100%;
                  text-align: center;
                  height: 100%;
                  span{
                    color:#fff;
                    font-size:24px;
                    display: inline-block;
                    vertical-align: middle;
                    margin-top: 65px;
                  }
                }
                .upload-mask {
                        z-index: 10;
                  position: absolute;
                  left: 50%;
                  top: 50%;
                  transform:translate(-50%,-50%);
                  width: 100%;
                  text-align: center;
                  height: 100%;
                    background-color:#000;
                    opacity: .3;
                }
                .no-data {
                    text-align: center;
                    margin: 60px 0 0;
                    img {
                            width: 150px;
                    }
                    span {
                        font-size: 13px;
                        color: #0686F9;
                        letter-spacing: 0; 
                        margin: 29px 0 0 0;
                        display:inline-block;
                    }
                }
        }

        .img-container .l li{
            height:200px;
            position:relative;
            float: left;
            overflow: hidden;
        }
        .imgShow{
            margin:0 10px 0 0;
        }
        .img-container .l li img{
            display: block;
            overflow: hidden;
        }
        .img-container .r{
            color:#666;
            float: right;
            margin: 0 39px 0 32px;
            line-height: 20px;
            width: 145px;
            position: relative;
            letter-spacing: 0;
        }
        .img-container .r b{
            vertical-align: middle;
            display: block;
            margin-top: 15px;
        }

        .img-container .r b.img-params{
            margin-top: 0;
            span {
                position: absolute;
                left: -16px;
                width: 11px;
                height: 16px;
            }
        }
        .img-container .r div{
            margin-top: 15px;
        }
        .img-container .r b span{
            color: #FFB100;
            font-size: 10px;
            vertical-align: middle;
        }

        .for-show{
            text-align: center;
            padding:10px 0;
            line-height: 20px;
            vertical-align: middle;
            color:#333;
            box-sizing:border-box;
            width: 100%;
            font-size: 13px;
            position:relative;
            overflow: hidden;
            span{
                vertical-align: top;
            }
        }
        .ellipsis-text{
            height:20px;
            overflow:hidden;
        }
        .img-container .el-input{
            margin:2px 0;
        }

        .txt{
            max-width:200px;
            position:relative;
            padding-right:10px;
            display: inline-block;
            overflow:hidden;
            text-overflow:ellipsis;
            -o-text-overflow:ellipsis;
            -webkit-text-overflow:ellipsis;
            -moz-text-overflow:ellipsis;
            white-space:nowrap;
        }

        .file-tips{
            height: 24px;
            opacity: .8;
            background-color:#333;
            position:absolute;
            border-radius:4px;
            line-height: 24px;
            color:#fff;
            padding:0 10px;
            right:10px;
            bottom:50px;
        }
</style>

